<template>
  <div class="form_wrap">
    <template v-if="formList.length && formType.length">
      <el-row class="form_item" v-for="(item, index) in formList" :key="index">
        <el-col :span="4">
          <el-input
            :key="index"
            size="small"
            :maxlength="32"
            v-model="item.name"
            @change="handleName"
          ></el-input>
        </el-col>
        <el-col :span="6" style="margin-left: 10px">
          <el-select
            @change="handleChange($event, index)"
            size="small"
            v-model="item.type"
            placeholder="请选择"
          >
            <el-option
              v-for="ele1 in formType"
              :key="ele1.value"
              :label="ele1.name"
              :value="ele1.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8" style="margin-left: 60px">
          <el-button-group>
            <el-button
              :plain="item.disabled || item.required"
              @click="handleChoose(false, index)"
              size="small"
              type="primary"
              >选填</el-button
            >
            <el-button
              @click="handleChoose(true, index)"
              size="small"
              :plain="item.disabled || !item.required"
              type="primary"
              >必填</el-button
            >
            <el-button
              @click="handleShow(index)"
              size="small"
              :plain="!item.disabled"
              type="primary"
              >隐藏</el-button
            >
          </el-button-group>
          <el-button
            @click="hanleDelete(index)"
            style="margin-left: 20px"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </el-col>
      </el-row>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    formList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    formType: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      
    };
  },
  methods: {
    handleChoose(bool, index) {
      //给当前元素设置为必填或者选填
      this.formList[index].required = bool;
      this.formList[index].disabled = false;
      this.$parent.$parent.$parent.saveFormFn();
    },
    handleShow(index) {
      //给表单设置是否禁用
      this.formList[index].disabled = true;
      this.$parent.$parent.$parent.saveFormFn();
    },
    handleChange(val, index) {
      console.log(val, index);
      this.formList[index].type = val;
      this.$parent.$parent.$parent.saveFormFn();
    },
    hanleDelete(index) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$parent.$parent.$parent.deleteForm(this.formList[index].id);
          this.formList.splice(index, 1);
        })
        .catch(() => {
          
        });
    },
    handleName() {
      this.$parent.$parent.$parent.saveFormFn();
    },
  },
};
</script>
<style lang="scss" scoped>
.form_wrap {
  .form_item + .form_item {
    margin-top: 15px;
  }
}
//相邻兄弟选择器
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
